<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		
	</head>
	<body>
		<div id="app">
		
			ID:<input type="text" disabled v-model="user.id"/>
			姓名：<input type="text" v-model="user.name"/>
			年龄：<input type="text" v-model="user.age"/><br />
			性别：<input type="text" v-model="user.sex"/>
			<button @click="updateUser">更新</button>
			
			<table id="tab1" border="1px" width="700px" align="center">
				<tr>
					<td colspan="5" align="center"><h1>表格数据</h1></td>
				</tr>
				<tr align="center">
					<td>ID编号</td>
					<td>名称</td>
					<td>年龄</td>
					<td>性别</td>
					<td>操作</td>
				</tr>
				<tr align="center" v-for="item in userList">
					<td v-text="item.id">ID编号</td>
					<td v-text="item.name">名称</td>
					<td v-text="item.age">年龄</td>
					<td v-text="item.sex">性别</td>
					<td>
						<!-- //把item传给页面顶层表单。table是单向的，而form是双向的，适合于修改， -->
						<button @click="updateUserBtn(item)">修改</button>
						<button @click="deleteUser(item.id)">删除</button>
					</td>
				</tr>
			</table>
			
		</div>
		
		<script src="../js/vue.js"></script>
		<script src="../js/axios.js"></script>
		<script>
			
			axios.defaults.baseURL="http://localhost:8085"
			const app=new Vue({
				el:"#app",
				data:{
					userList:[],
					user:{
						id:'',
						name:'',
						age:'',
						sex:''
						
					}
				},
				methods:{
					getUserList(){
						//发起ajax请求
						axios.get("/getUser").then(result=>{
							this.userList=result.data
							console.log(this.userList)
						})
					},
					//页面弹出一个表单，可以在这个表单中对数据记录进行修改
					updateUserBtn(user){
						this.user=user
					},												
					deleteUser(id){
						
						axios.delete("/user/"+id).then(result=>{
							//删除后，重新加载页面
						this.getUserList()
						})
						//this.getUserList()不能放在then()方法外面，因为ajax异步特性，
						//可能会在删除之前刷新页面
					},
					updateUser(){
						// let user={}
						// user.id=this.user.id
						// user.name=this.user.name
						// user.age=this.user.age
						// user.sex=this.user.sex
						axios.put("/updateUser",this.user).then(
						result=>{
							alert(result.data)
							this.getUserList()
						})
					}
				},
				//页面渲染完成后执行
				// created(){
					
				// },
				mounted(){
					//页面加载完成后调用函数
					this.getUserList()
				}
			})
			
			
		</script>
		
		
		
	</body>
</html>
